<template>
  <view class="page">
    <view class="b-search">
      <input
        type="text"
        placeholder="搜索"
        maxlength="10"
        placeholder-style="font-size:14px;color:#bbb"
        @tap="toSearchPage"
      />
      <view class="btn">
        搜索
      </view>
      <uniIcons
        type="search"
        size="22"
        color="#bbb"
        class="icon"
      ></uniIcons>
    </view>

    <view class="b-title">
      <view
        class="b-title__item"
        :class="[index == tabIndex ? 'b-title__item--active' : ' ']"
        v-for="(name,index) in tabs"
        :key="index"
        @tap="tabChange(index)"
      >{{name}}
      </view>
    </view>
    <view class="b-goods">
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        @scrolltolower="scrollBottom"
        lower-threshold=10
        :style="{'height':screenHeight-200+'px'}"
      >
        <view
          class="b-goods__item"
          v-for="(item,index) in goodsList"
          :key="index"
        >
          <view
            class="radio"
            :class="[item.checked ? 'b-goods__item--checked' : ' ']"
            @tap="handleSelect(index)"
          ></view>
          <view class="b-goods__item-left">
            <image :src="'https://expay-mall.s3-sa-east-1.amazonaws.com' + item.coverPic"></image>
          </view>
          <view
            class="b-goods__item-right"
            @tap="handleUrl(item.goodsId,item.state)"
          >
            <view class="b-goods__title">{{item.title}}</view>
            <view class="b-goods__bottom">
              <view class="group">
                <text class="t1">ARS$</text>
                <text class=t2>{{item.price}}</text>
              </view>
              <text class="text2">{{item.praise}}点赞</text>
            </view>
          </view>
        </view>
        <graceLoading
          :loadingType="loadingType"
          v-if="goodsList.length"
        ></graceLoading>
      </scroll-view>
    </view>
    <view class="b-handle">
      <view
        class="b-handle__item all"
        @tap="handleCheckeAll"
      >
        <view
          class="radio"
          :class="[checkedAll?'checkedAll' : '']"
        ></view>
        <view>全选</view>
      </view>
      <view class="btn-group">
        <view
          style="color:#fff;background:#4D91F9"
          v-if="tabIndex == 0"
          class="item"
          @tap="unload()"
        >
          下架
        </view>
        <view
          v-if="tabIndex == 1"
          class="item"
          @tap="putaway()"
          style="color:#fff;background:#4D91F9"
        >
          上架
        </view>
        <view
          class="item"
          @tap="deleteGoods"
        >
          删除
        </view>
      </view>
    </view>
    <none v-if="!goodsList.length"></none>
  </view>
</template>
<script>
import graceLoading from '../../graceUI/components/graceLoading.vue';
import uniIcons from "@/components/uni-icons/uni-icons"
import none from "@/components/none"
const SELL = 2;
const STORE = 3;
export default {
  components: { graceLoading, uniIcons, none },
  onLoad(opt) {

    console.log(opt)
    if (opt.tabIndex) {
      this.tabIndex = opt.tabIndex
      return this.getGoodsList(STORE)
    }
    this.getGoodsList(SELL)
  },
  onShow() {
  },
  data() {
    return {
      screenHeight: uni.getSystemInfoSync().screenHeight,
      loadingType: 0,
      tabIndex: 0,
      tabs: ['在售', '仓库'],
      pageSize: 10,
      cur_page: 1,
      toatl: 0,
      checkedAll: false,
      goodsList: [],
      checkedArr: []
    }
  },

  computed: {
    state() {
      if (this.tabIndex == 0) {
        return SELL
      } else if (this.tabIndex == 1) {
        return STORE
      }
    }
  },
  methods: {
    initData() {
      this.goodsList = [],
        this.cur_page = 1
    },
    scrollBottom(e) {
      this.loadingType = 1; //加载中
      this.cur_page++;
      if (this.goodsList.length >= this.total) {
        this.loadingType = 2;
        return;
      }
      setTimeout(() => {
        this.getGoodsList(this.state)
      }, 500);
    },
    async getGoodsList(state = 2) {
      this.$ld()
      let res = await this.$http.POST({
        url: '/seller/goods/page',
        data: {
          pageNo: this.cur_page,
          pageSize: this.pageSize,
          state,
        }
      })
      uni.hideLoading()
      if (res.code == 200) {
        for (let item of res.data.list) {
          item.checked = false
        }
        this.goodsList = this.goodsList.concat(res.data.list)
        this.total = res.data.totalCount
      }
    },
    tabChange(i) {
      this.tabIndex = i
      this.initData()
      this.getGoodsList(this.state)
    },
    toSearchPage() {
      uni.navigateTo({
        url: `/pages/GoodsSearch/index`
      });
    },
    handleUrl(id, state) {
      uni.navigateTo({
        url: `/pages/GoodsManage/goodsDetail?goodsId=${id}&state=${state}`
      });
    },
    handleSelect(i) {
      this.goodsList[i].checked = !this.goodsList[i].checked
      for (let item of this.goodsList) {
        if (!item.checked) {   //取消全选
          this.checkedAll = false
        }
        if (item.checked) {   //全选
          this.checkedArr.push(item.checked)
          this.checkedArr.length >= this.goodsList.length ? this.checkedAll = true : this.checkedAll
        }
      }
    },
    handleCheckeAll() {
      this.checkedAll = !this.checkedAll
      for (let item of this.goodsList) {
        if (this.checkedAll) {
          item.checked = true
        } else {
          item.checked = false
        }
      }
    },
    unload() {
      let unloadData = []
      for (let item of this.goodsList) {
        if (item.checked) {
          unloadData.push(item.goodsId)
          uni.showModal({
            title: '提示',
            content: '是否下架选中商品?',
            success: async res => {
              if (res.confirm) {
                this.$ld()
                let res = await this.$http.POST({
                  url: '/seller/goods/lower',
                  data: {
                    goodsIds: unloadData
                  }
                })
                uni.hideLoading();
                if (res.code == 200) {
                  item.checked = false
                  this.checkedAll = false
                  this.initData()
                  this.tabIndex = 1
                  this.getGoodsList(this.state)
                  uni.showToast({ title: '下架成功' })
                }
              }
            }
          })
        } else if (this.checkedArr.length < 1) {
          uni.showToast({ title: '请选择要下架的商品', icon: 'none' })
        }
      }
    },
    putaway() {
      let goodsIds = []
      for (let item of this.goodsList) {
        if (item.checked) {
          goodsIds.push(item.goodsId)
          uni.showModal({
            title: '提示',
            content: '是否上架选中商品?',
            success: async res => {
              if (res.confirm) {

                this.$ld()
                let res = await this.$http.POST({
                  url: '/seller/goods/upper',
                  data: {
                    goodsIds,
                  }
                })
                uni.hideLoading();
                if (res.code == 200) {
                  item.checked = false
                  this.checkedAll = false
                  this.initData()
                  this.tabIndex = 0
                  this.getGoodsList(this.state)
                  uni.showToast({ title: '上架成功' })
                }
              }
            }
          })
        } else if (this.checkedArr.length < 1) {
          uni.showToast({ title: '请选择要上架的商品', icon: 'none' })
        }
      }
    },
    deleteGoods() {
      let goodsIds = []
      for (let item of this.goodsList) {
        if (item.checked) {
          goodsIds.push(item.goodsId)
          uni.showModal({
            title: '提示',
            content: '是否删除选中商品?',
            success: async res => {
              if (res.confirm) {
                this.$ld()
                let res = await this.$http.POST({
                  url: '/seller/goods/remove',
                  data: {
                    goodsIds,
                  }
                })
                uni.hideLoading();
                if (res.code == 200) {
                  item.checked = false
                  this.checkedAll = false
                  this.initData()
                  this.getGoodsList(this.state)
                  uni.showToast({ title: '删除成功' })
                }
              }
            }
          })
        } else if (this.checkedArr.length < 1) {
          uni.showToast({ title: '请选择要删除的商品', icon: 'none' })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/scss';
.page{
  padding-top: 40upx;
  background: #fff;
}
@include b(search) {
  position: relative;
  background: #fff;
  display: flex;
  justify-content: center;
  input {
    border: 1px solid #eee;
    @include size(470upx, 52upx);
    border-radius: 56upx;
    background: #f9f9f9;
    padding-left: 80upx;
  }
  .btn {
    background: #2293ec;
    color: #fff;
    @include size(100upx, 52upx);
    @include flex-center;
    border-radius: 18upx;
    margin-left: 16upx;
  }
  .icon {
    position: absolute;
    left: 72upx;
    top: 50%;
    transform: translateY(-50%);
  }
}
@include b(title) {
  padding: 20upx 38upx 0 38upx;
  background: #fff;
  display: flex;
  @include e(item) {
    @include size(50%, 60upx);
    @include flex-center;
    border: 1px solid #0079fe;
    color: #0079fe;
    border-radius: 4upx;
    @include m(active) {
      background: #0079fe;
      color: #fff;
    }
  }
}
@include b(goods) {
  background: #fff;
  padding: 30upx;
  .scroll-Y {
    height: 960upx;
  }
  @include e(item) {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 20upx 0;
    position: relative;
    padding-left: 80upx;
    .radio {
      @include size(32upx, 32upx);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 2upx;
      border: 1px solid #ccc;
    }
    &--checked {
      position: relative;
    }
    &--checked::after {
      content: '';
      background: url('../../static/img/gou.png');
      @include size(30upx, 30upx);
      background-size: 100%, 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    &-left {
      image {
        @include size(160upx, 160upx);
      }
    }
    &-right {
      margin-left: 50upx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      padding-right: 30upx;
    }
  }
  @include e(title) {
    padding-top: 10upx;
  }
  @include e(bottom) {
    padding-bottom: 10upx;
    @include flex-bw;
    .group {
      color: red;
      .t2 {
        font-size: 36upx;
        padding-left: 6upx;
      }
    }
    .text2 {
      color: #999;
      font-size: 24upx;
    }
  }
}

@include b(handle) {
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140upx;
  display: flex;
  box-shadow: 0px -2upx 2upx rgba(0, 0, 0, 0.1);
  @include e(item) {
    flex: 1;
    border-left: 1px solid #eee;
    &.all {
      width: 200upx;
      position: relative;
      .radio {
        @include size(32upx, 32upx);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50upx;
        border: 1px solid #ccc;
      }
      .checkedAll::after {
        content: '';
        background: url('../../static/img/gou.png');
        @include size(30upx, 30upx);
        background-size: 100%, 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    @include flex-center;
  }
  .btn-group {
    display: flex;
    align-items: center;
    .item {
      @include size(180upx, 64upx);
      @include flex-center;
      border: 1px solid #4d91f9;
      border-radius: 8upx;
      color: #4d91f9;
      margin-right: 20upx;
    }
  }
}
</style>